<template>
  <div class="box">
<!-- 内容 -->
    <div style="width:95%;height:100%;margin:0 auto;" class="box-content">
      <!-- 头部 -->
    <div class="box-top" style="display:flex">
      <div  style="width:40%" class='box-top-left'>
        <div class="daohang">
      <i style="font-size:20px;color:#999;line-height:60px;float: left;"  class="el-icon-s-home"></i>  
      <el-breadcrumb >
      <el-breadcrumb-item style="font-size:15px;color:#999; line-height:60px; margin-left:8px;display:block;float: left;" >首页 </el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px;margin-left:-3px;float: left" class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">财务管理</el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px; margin-left:5px;float: left"   class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">积分明细</el-breadcrumb-item>
    </el-breadcrumb>
    
      </div>
     <!-- 时间 -->
     <div class="block"  @click=" Manchu()">
    <el-date-picker
    @blur="Man()"
    popper-class="date"
    change="datechange()"
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
      </div>
    <!--  -->
      <div style="width:30%"></div>
      <!-- 右侧 -->
      <div class="box-top-right;"  style="width:35%;">
        <input placeholder="请输入关键字" v-model="values" class="input" type="text" />
        <button @click="search">搜索</button>
        <button class="button2">导出</button>
      </div>

    </div>
        <!-- 表单 -->
 <div class="box-table">
 <div v-if="isFalse" style="width:100%;height:335px;"></div>
 <div  class="table-box" v-if="isTime1" >

  <el-table v-if="isSe"
    :data="showList"
    height="390"
    border
    style="width: 90%;margin-left:2%;">
    <el-table-column
        prop="jifen"
        label="充值单号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户"
        width="180">
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="Integralvariation"
        label="充值金额">
      </el-table-column>
      <el-table-column
        prop="time"
        label="充值时间">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="充值方式">
      </el-table-column>
      <el-table-column
        prop="operator"
        label="状态">
      </el-table-column>

    </el-table> 
    
    <!-- 搜索 -->
    <el-table v-if=" isSea"
  :data="searchList"
  height="390"
  border
  style="width: 90%;margin-left:2%">
  <el-table-column
        prop="jifen"
        label="充值单号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户"
        width="180">
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="Integralvariation"
        label="充值金额">
      </el-table-column>
      <el-table-column
        prop="time"
        label="充值时间">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="充值方式">
      </el-table-column>
      <el-table-column
        prop="operator"
        label="状态">
      </el-table-column>
  </el-table>


   <div class="table-bottom" style="display:flex">
    <div style="width:30%" class="table-left">
      <span style="font-size:15px;display:block;margin:10px 10px ">第{{this.size}}条 共{{this.nameList.length/this.pageNum}}页,共{{this.nameList.length}}条</span>
    </div>
    <div  style="width:70%;" class="table-right">
      <el-pagination
      style="margin-left:40%;margin-top:1%"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[8, 10, 20,40]"
      :page-size="5"
      :total="nameList.length"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
 
   </div>
 </div>
 <!-- 时间 -->
 <div class="table-box"  v-if="isTime" >
<el-table 
  :data="dataTime"
  height="390"
  border
  style="width: 90%;margin-left:2%">
  <el-table-column
        prop="jifen"
        label="充值单号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户"
        width="180">
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="Integralvariation"
        label="充值金额">
      </el-table-column>
      <el-table-column
        prop="time"
        label="充值时间">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="充值方式">
      </el-table-column>
      <el-table-column
        prop="operator"
        label="状态">
      </el-table-column>
  </el-table>

 </div>
</div>


</div>
    </div>


</template>


<script>
import {getRecharge} from '../../api/index'
  export default {
    data() {
      return {
        // 搜索
        isSe:true,
        isSea:false,
        // 搜索内容
        values:'',
        searchList:[],
        currentPage4: 1,
        isFalse:false,
        // 时间
        data1:[],
        isTime1:true,
        isTime:false,
        dataTime:[],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: [new Date(), new Date()],
        value2: '',
        pageNum: 8, // 每页页数
        size:1,
        nameList:[],// 总数据   
        showList:[] 
       };
    
    },
      watch:{
        // 被侦听的变量count
        values(){
            if(this.values==''){
          this.isSe=true
          this.isSea=false
            }
        }
  },
    created(){
      this.getList()
    },
    methods:{
// 请求数据
 getList(){
  getRecharge().then(res=>{
    this.nameList=res.data
    this.showList = this.nameList.slice(0,this.pageNum)
    this.nameList.forEach(item=>{
 let a=parseInt(item.time)
//  console.log(a)
      // 时间转换
function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';  
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D+h+m+s;
}
item.time=timestampToTime(a)
// console.log(item.time)
    })
  })
 },
      Manchu(){
        this.isFalse=true
      },
      Man(){
        this.isFalse=false
  var a = new Date(this.value1[0]);
 let q=a.getTime()
console.log(q)
  var b = new Date(this.value1[1]); 
  let w=b.getTime()
  console.log(w)
    this.nameList.forEach(item=>{
      var c = new Date(item.time);
      let e=c.getTime()
      console.log(e>=q&&e<w)
      if(e>=q&&e<w){
        this.dataTime.push(item)
        this.isTime=true
        this.isTime1=false
      }
      // console.log(this.dataTime)
    })
      },
      handleSizeChange(val) {
    this.pageNum = val
    this.showList = this.nameList.slice(0,this.pageNum)
      },
      handleCurrentChange(val) {
 this.size = val
 this.showList = this.nameList.slice(val * this.pageNum - this.pageNum, val *this.pageNum)
      },
      // 搜索
      search(){
        // console.log(this.values)
      this.nameList.forEach(item=>{
        if(this.values==item.name){
          this.searchList.push(item)
          this.isSe=false
          this.isSea=true
          if(this.searchList.length>1){
            this.searchList.shift()
          }
        console.log(this.searchList)
        }
      })
      },
      // 时间
   
    }
  };
</script>



<style lang="scss" scoped>
.box{
width: 100%;
height: 900px;
// 头部
.box-top{
  width: 100%;
height: 110px;
// background:blue;
// 导航
.daohang{
  width: 100%;
  height: 50px;
}
// 时间
.block{
  width: 20%;
  margin-top: 1%;
}
// 右侧
.input{
      width: 70%;
      height: 30px;
      margin-top: 13%;
    }
    button{
      width: 12%;
      height: 33px;
    }
    .button2{
      margin: 3px;
    }
    // 表格
}
.box-table{
      width: 100%;
      height: 500px;
    }
    .table-box{
      width: 100%;
      height: 450px;
      // background: blue;
      margin-top: 2%;
      .table-bottom{
        width: 85%;
        height: 60px;
        // background: red;
        margin-left:7%;
      }
    }
}

</style>